<template>
  <div
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-text="处理视频中,请耐心等待."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.9)"
    class="header"
  >
    <router-link to="/">
      <p class="headerTitle">德令哈槽式光热电站无人机智慧巡检平台</p>
    </router-link>
    <div class="showTime">{{ showTime }}</div>
    <div class="type">
      <!-- <span @click="dealVideo">处理视频</span> -->
      <span @click="dealFile">处理视频</span>
      <span @click="gotoMile"
        >选择播放<input type="file" class="upload-demo" accept="video/*" @change="gotoMile"
      /></span>
    </div>
    <div class="type2">
      <el-date-picker
        v-model="chooseMonth"
        type="month"
        placeholder="选择月份"
        :disabled-date="disabledDate"
        @change="MonthChange"
      />
      <span @click="reset">重置</span>
      <span @click="exportDatas">导出</span>
    </div>
    <p class="bottomTitle">北京斯睦大屏演示DEMO - V{{ version }}</p>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import dayjs from 'dayjs'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
import PackageJson from '../../../../package.json'
import { getDealVideo } from '../api/common/home'
import { ElMessage } from 'element-plus'
const version = PackageJson.version
const showTime = ref()
const fullscreenLoading = ref(false)
const selectedPath = ref('')
let chooseMonth = ref(dayjs(new Date()).format('YYYY-MM'))
let videoUrl = ref()
// 获取传递的导出数据
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return []
    }
  }
})
// 组装导出数据
const exportChartDatas = ref([])
watch(
  () => props.data,
  (newV) => {
    exportChartDatas.value = []
    newV.forEach((item, index) => {
      exportChartDatas.value.push([item.name, Math.abs(item.data[0]), item.data[1]])
    })
  }
)
// 月份改变向父组件传值
const emit = defineEmits(['updateChooseMonth', 'update-choose-video', 'reset'])
function disabledDate(time) {
  return time.getTime() > Date.now()
}
function MonthChange(val) {
  if (val != null) {
    chooseMonth.value = dayjs(val).format('YYYY-MM')
    emit('updateChooseMonth', chooseMonth.value)
  }
}

const dealVideo = async () => {
  const paths = await window.electronAPI.selectDirectoryDialog()
  if (paths && paths.length > 0) {
    selectedPath.value = paths[0]
  }
  console.log(selectedPath)
}

const dealFile = async () => {
  const path = await window.electronAPI.selectFileDialog()
  if (path) {
    selectedPath.value = path
    fullscreenLoading.value = true
    getDealVideo(selectedPath.value).then((res) => {
      if (res.code === 200) {
        fullscreenLoading.value = false
        let _data = res.data
        ElMessage.success({
          message: '处理完成，视频名称为：' + _data.video_name,
          customClass: 'dealVideoIcon'
        })
      }
    })
  }
  console.log(selectedPath)
}

function gotoMile(event) {
  const selectedFile = event.target.files[0] // 获取用户选择的文件
  if (selectedFile) {
    videoUrl.value = URL.createObjectURL(selectedFile)
    emit('update-choose-video', videoUrl.value)
  }
}

function reset() {
  emit('reset')
}

function exportDatas() {
  // 定义数据
  let datas = [
    ['类型', '当月', '上月']
    // 更多数据...
  ]
  const data = [...datas, ...exportChartDatas.value]
  // 将数据转换为工作表
  const ws = XLSX.utils.aoa_to_sheet(data)

  // 创建工作簿并添加工作表
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

  // 生成Excel文件并导出
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })

  // 使用file-saver保存文件
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  saveAs(blob, chooseMonth.value + '数据导出.xlsx')
}
function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff
  return buf
}

onMounted(() => {
  showTime.value = dayjs(new Date()).format('YYYY-MM-DD')
})
</script>

<style lang="scss" scoped>
.header {
  width: 19.2rem;
  height: 0.72rem;
  line-height: 0.72rem;
  background: url('../assets/images/common/header.png');
  background-size: 100% 100%;
  text-align: center;
  font-size: 0.5rem;
  position: relative;
  z-index: 1;
  .headerTitle {
    color: #3ee2ff;
  }
  .bottomTitle {
    line-height: 0.2rem;
    color: #3ee2ff;
    position: absolute;
    bottom: -10rem;
    right: 0.2rem;
    font-size: 0.2rem;
  }
  .showTime {
    position: absolute;
    top: -0.16rem;
    right: 0.5rem;
    font-size: 0.2rem;
    color: #02d9ff;
  }
  .type,
  .type2 {
    position: absolute;
    top: 0.5rem;
    font-size: 0.16rem;
    width: 3rem;
    display: flex;
    justify-content: space-between;
    > span {
      width: 0.8rem;
      margin-left: 0.2rem;
      height: 0.28rem;
      line-height: 0.28rem;
      color: #02d9ff;
      cursor: pointer;
      border: 0.8px solid #02d9ff;
      background: linear-gradient(-180deg, rgba(5, 238, 255, 0.05) 0%, rgba(2, 217, 255, 0.3) 100%);
    }
  }
  .type {
    left: 0.2rem;
    span {
      width: 1.6rem;
    }
  }
  .upload-demo {
    width: 1.3rem;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 1.7rem;
    cursor: pointer;
  }
  .type2 {
    right: 0.5rem;
  }
  :deep(.el-input) {
    height: 0.28rem;
    width: 1.74rem;
  }
  :deep(.el-input__wrapper) {
    box-shadow: none;
    border: 0.8px solid #02d9ff;
    background: linear-gradient(-180deg, rgba(5, 238, 255, 0.05) 0%, rgba(2, 217, 255, 0.3) 100%);
  }
  :deep(.el-input__inner),
  :deep(.el-input__icon) {
    font-size: 0.16rem;
    color: #02d9ff;
  }
}
</style>
<style>
.dealVideoIcon {
  font-size: 0.5rem !important;
}
</style>
